import "../sass/dingdan.scss";

import { useParams, useNavigate } from "react-router-dom";
import { NavBar, Tabs, ProductCard } from "react-vant";

import { useState, useEffect } from "react";
import axios from "axios";
import { DeleteO } from "@react-vant/icons";

function Dingdan() {
    let navigate = useNavigate();
    let [dingdata, setDingdata] = useState([]);
    let [status, setStatus] = useState(0);

    let arr = [
        { sum: 0, title: "全部" },
        {
            sum: 1,
            title: "进行中",
        },
        {
            sum: 2,
            title: "已完成",
        },
    ];
    let getfinesh = (e, id) => {
        console.log("e", e);
        console.log("id", id);
        let status = id;
        let url = "";
        if (id === 1) {
            url = "/receive";
        } else if (id === 2) {
            url = "/removeOrder";
        }
        let oid = e;
        axios({
            method: "post",
            url,
            data: {
                oid,
            },
        })
            .then((res) => {
                console.log("res", res);

                axios({
                    method: "get",
                    url: "/findOrder",
                    params: {
                        status,
                    },
                }).then((res) => {
                    //  console.log("订单", res.data.result);
                    let array = [];
                    array = res.data.result;
                    //  console.log(array);
                    let cache = {}; //存储的是键是zhuanye 的值，值是zhuanye 在indeces中数组的下标
                    let indices = []; //数组中每一个值是一个数组，数组中的每一个元素是原数组中相同zhuanye的下标
                    array.map((item, index) => {
                        let zhuanye = item.oid;
                        let _index = cache[zhuanye];
                        if (_index !== undefined) {
                            indices[_index].push(item);
                        } else {
                            cache[zhuanye] = indices.length;
                            indices.push([item]);
                        }
                    });
                    dingdata = indices;
                    setDingdata([...dingdata]);
                    console.log("dingdata", dingdata);
                    dingdata.forEach((item) => {
                        item.zongshu = 0;
                        item.zongjia = 0;
                        item.status = item[0].status;
                        for (let ite of item) {
                            item.zongshu += ite.count;
                            item.zongjia +=
                                ite.count *
                                Number(ite.price);
                            let data =
                                ite.updatedAt.split("T")[0];
                            let time = ite.updatedAt
                                .split("T")[1]
                                .split(".")[0];
                            item.time = time;
                            item.data = data;
                        }
                    });
                });
            })
            .catch((err) => {});
    };

    let huodata = () => {
        axios({
            method: "get",
            url: "/findOrder",
            params: {
                status: 0,
            },
        })
            .then((res) => {
                //   console.log("订单", res.data.result);
                let array = [];
                array = res.data.result;
                //  console.log(array);
                let cache = {}; //存储的是键是zhuanye 的值，值是zhuanye 在indeces中数组的下标
                let indices = []; //数组中每一个值是一个数组，数组中的每一个元素是原数组中相同zhuan
                array.map((item, index) => {
                    let zhuanye = item.oid;
                    let _index = cache[zhuanye];
                    if (_index !== undefined) {
                        indices[_index].push(item);
                    } else {
                        cache[zhuanye] = indices.length;
                        indices.push([item]);
                    }
                });
                dingdata = indices;
                setDingdata([...dingdata]);
                // console.log("dingdata", dingdata);
                dingdata.forEach((item) => {
                    item.zongshu = 0;
                    item.zongjia = 0;
                    for (let ite of item) {
                        item.zongshu += ite.count;
                        item.zongjia +=
                            ite.count * Number(ite.price);
                        let data =
                            ite.updatedAt.split("T")[0];
                        let time = ite.updatedAt
                            .split("T")[1]
                            .split(".")[0];
                        item.time = time;
                        item.data = data;
                    }
                });
            })
            .catch((err) => {});
    };

    let getdingdan = (e) => {
        // setStatus(e.name);
        let status = e.index;

        console.log("e", e);
        axios({
            method: "get",
            url: "/findOrder",
            params: {
                status,
            },
        })
            .then((res) => {
                //  console.log("订单", res.data.result);
                let array = [];
                array = res.data.result;
                //  console.log(array);
                let cache = {}; //存储的是键是zhuanye 的值，值是zhuanye 在indeces中数组的下标
                let indices = []; //数组中每一个值是一个数组，数组中的每一个元素是原数组中相同zhuanye的下标
                array.map((item, index) => {
                    let zhuanye = item.oid;
                    let _index = cache[zhuanye];
                    if (_index !== undefined) {
                        indices[_index].push(item);
                    } else {
                        cache[zhuanye] = indices.length;
                        indices.push([item]);
                    }
                });
                dingdata = indices;
                setDingdata([...dingdata]);
                console.log("dingdata", dingdata);
                dingdata.forEach((item) => {
                    item.zongshu = 0;
                    item.zongjia = 0;
                    item.status = item[0].status;
                    for (let ite of item) {
                        item.zongshu += ite.count;
                        item.zongjia +=
                            ite.count * Number(ite.price);
                        let data =
                            ite.updatedAt.split("T")[0];
                        let time = ite.updatedAt
                            .split("T")[1]
                            .split(".")[0];
                        item.time = time;
                        item.data = data;
                    }
                });
            })
            .catch((err) => {});
    };
    useEffect(() => {
        //  getdingdan();
        //  huodata();
    }, []);
    return (
        <div className="dingdan">
            <NavBar
                title="我的订单"
                leftText="返回"
                onClickLeft={() => navigate(-1)}
            />
            <div className="ca-bei"></div>
            <div className="ca-box">
                <div className="demo-tabs">
                    <Tabs
                        align="start"
                        onClickTab={(e) => getdingdan(e)}
                    >
                        {arr.map((item, index) => (
                            <Tabs.TabPane
                                key={item.sum}
                                name={item.sum}
                                title={item.title}
                            >
                                {dingdata.map(
                                    (item, index) => {
                                        return (
                                            <div
                                                className="ding-dan"
                                                key={index}
                                            >
                                                <div className="din-name">
                                                    订单信息
                                                </div>
                                                <div className="d-fen">
                                                    <div className="dingfen">
                                                        <div className="d-bianhao">
                                                            订单编号:
                                                            {
                                                                item[0]
                                                                    .oid
                                                            }
                                                        </div>
                                                        {item.status ===
                                                        1 ? (
                                                            <div
                                                                className="dingzh"
                                                                onClick={() =>
                                                                    getfinesh(
                                                                        item[0]
                                                                            .oid,
                                                                        item.status
                                                                    )
                                                                }
                                                            >
                                                                确认收货
                                                            </div>
                                                        ) : (
                                                            <div
                                                                className="dingzh"
                                                                onClick={() =>
                                                                    getfinesh(
                                                                        item[0]
                                                                            .oid,
                                                                        item.status
                                                                    )
                                                                }
                                                            >
                                                                <DeleteO fontSize="20px" />
                                                                <div className="wan">
                                                                    已完成
                                                                </div>
                                                            </div>
                                                        )}
                                                    </div>
                                                    <div className="d-dan">
                                                        {item.map(
                                                            (
                                                                ite,
                                                                ind
                                                            ) => {
                                                                return (
                                                                    <div
                                                                        className="d-status"
                                                                        key={
                                                                            ind
                                                                        }
                                                                    >
                                                                        <ProductCard
                                                                            num={
                                                                                ite.count
                                                                            }
                                                                            price={
                                                                                ite.price
                                                                            }
                                                                            desc={
                                                                                <div>
                                                                                    <div className="tang">
                                                                                        {
                                                                                            ite.rule
                                                                                        }
                                                                                    </div>
                                                                                </div>
                                                                            }
                                                                            title={
                                                                                <div>
                                                                                    <div className="p-name">
                                                                                        {
                                                                                            ite.name
                                                                                        }
                                                                                    </div>
                                                                                    <div className="y-na">
                                                                                        {
                                                                                            ite.enname
                                                                                        }
                                                                                    </div>
                                                                                </div>
                                                                            }
                                                                            thumb={
                                                                                ite.smallImg
                                                                            }
                                                                        />
                                                                    </div>
                                                                );
                                                            }
                                                        )}
                                                    </div>
                                                </div>
                                                <div className="dingdan-time">
                                                    <div className="ding-data">
                                                        {
                                                            item.data
                                                        }
                                                    </div>
                                                    <div className="ding-time">
                                                        {
                                                            item.time
                                                        }
                                                    </div>
                                                </div>
                                                <div className="zo-miao">
                                                    <div className="shangpin">
                                                        共计
                                                        {
                                                            item.zongshu
                                                        }
                                                        件商品
                                                    </div>
                                                    <div className="zonji">
                                                        订单金额：&yen;
                                                        {
                                                            item.zongjia
                                                        }
                                                    </div>
                                                </div>
                                            </div>
                                        );
                                    }
                                )}
                            </Tabs.TabPane>
                        ))}
                    </Tabs>
                </div>
            </div>
        </div>
    );
}
export default Dingdan;
